<template>
  <div ref='box'>div</div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import {
  ref,
  onMounted,
  readonly,
  shallowReadonly,
  isReactive,
  computed,
} from "vue";
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

// @Options({
//   components: {
//     // HelloWorld,
//   },
// })
// export default class Home extends Vue {
export default {
  setup() {
    // const aaa = readonly({ a: "123" }); 递归只读数据  // 不可修改
    // const aaa = shallowReadonly({ a: "123" }); 创建只读数据 不是递归只读
    // isReactive(aaa) 都为true
    const box = ref(null);
    console.log("box:1 ", box);

    onMounted(() => {
      console.log("box:2 ", box);
    });
    return { box };
  },
};
</script>
